<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 设置页面在移动设备上的显示方式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>新增优惠券和秒杀券</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/element.css">
    <link href="./css/main.css" rel="stylesheet">
    <link href="./imgs/icons/山工点评.ico" rel="icon" type="image/x-ico">
    <link href="./css/info.css" rel="stylesheet">

    <style type="text/css">
        .voucher-form {
            max-width: 600px;
            margin: 0 auto;
        }
        .form-item {
            margin-bottom: 20px;
        }
        .button-wrapper {
            display: flex;
            justify-content: space-between;
        }
        .button-wrapper button {
            flex-grow: 1;
            margin-right: 10px;
        }
        .el-button--primary.is-plain {
            color: #66b1ff;
            background: #ecf5ff;
            border-color: #b3d8ff;
        }
        .el-radio__input.is-checked+.el-radio__label {
            color: blue;
        }
        .el-radio__input.is-checked .el-radio__inner {
            background: blue;
        }
        .el-radio__inner:hover {
            border-color: blue;
        }
        .el-radio__input.is-checked .el-radio__inner {
            border-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header">
        <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
        <div class="header-title">新增优惠券和秒杀券</div>
    </div>
    <div class="voucher-form">
        <!-- 表单 -->
        <el-form ref="voucherForm" :model="voucher" label-width="100px">
            <!-- 商铺ID TODO 商户权限过大，应固定商户id，通过手机号查shop表得到-->
            <el-form-item label="商铺ID" class="form-item">
                <el-input v-model="voucher.shopId" @input="fetchShopInfo"></el-input>
                <span class="shop-name" v-if="shopName">{{ shopName }}</span>
            </el-form-item>
            <!-- 优惠券标题 -->
            <el-form-item label="优惠券标题" class="form-item">
                <el-input v-model="voucher.title"></el-input>
            </el-form-item>
            <!-- 副标题 -->
            <el-form-item label="副标题" class="form-item">
                <el-input v-model="voucher.subTitle"></el-input>
            </el-form-item>
            <el-form-item label="使用规则" class="form-item">
                <el-input v-model="voucher.rules"></el-input>
            </el-form-item>
            <!-- 支付金额 -->
            <el-form-item label="支付金额" class="form-item">
                <el-input v-model="voucher.payValue"></el-input>
            </el-form-item>
            <!-- 抵扣金额 -->
            <el-form-item label="抵扣金额" class="form-item">
                <el-input v-model="voucher.actualValue"></el-input>
            </el-form-item>
            <el-form-item label="优惠券类型" class="form-item">
                <el-radio v-model="voucher.type" :label="0">普通优惠券</el-radio>
                <el-radio v-model="voucher.type" :label="1">秒杀券</el-radio>
            </el-form-item>
            <el-form-item label="库存" class="form-item" v-if="voucher.type === 1">
                <el-input v-model="voucher.stock"></el-input>
            </el-form-item>
            <el-form-item label="生效时间" class="form-item" v-if="voucher.type === 1">
                <el-date-picker v-model="voucher.beginTime" type="datetime"></el-date-picker>
            </el-form-item>
            <el-form-item label="失效时间" class="form-item" v-if="voucher.type === 1">
                <el-date-picker v-model="voucher.endTime" type="datetime"></el-date-picker>
            </el-form-item>
            <div class="button-wrapper">
                <el-button type="primary" plain v-if="voucher.type === 0" @click="addVoucher">新增优惠券</el-button>
                <el-button type="primary" plain v-if="voucher.type === 1" @click="addSeckillVoucher">新增秒杀券</el-button>
                <el-button @click="goBack" plain>返回</el-button>
            </div>
        </el-form>
    </div>
    <foot-bar :active-btn="4"></foot-bar>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script src="./js/footer.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            voucher: {
                shopId: '', // 商铺ID
                title: '', // 优惠券标题
                subTitle: '', // 副标题
                rules: '', // 使用规则
                payValue: '', // 支付金额
                actualValue: '', // 抵扣金额
                stock: '', // 库存
                type: 0, // 默认为普通优惠券类型
                beginTime: '', // 秒杀券生效时间
                endTime: '' // 秒杀券失效时间
            },
            shopName: '', // 新增：用于存储查询到的商户名称
        },
        methods: {
            // 根据商户ID查询商户信息的方法（已更新）
            fetchShopInfo() {
                if (this.voucher.shopId) {
                    axios.get("/shop/" + this.voucher.shopId)
                        .then(response => {
                            console.log(response.data)
                            if (response.data.name) {
                                this.shopName = response.data.name;
                            } else {
                                this.$message.error("未能获取到商户信息！");
                            }
                        })
                        .catch(error => {
                            this.$message.error("查询商户信息失败：" + error);
                        });
                }
            },
            // 新增普通优惠券
            addVoucher() {
                axios.post("/voucher", this.voucher)
                    .then(response => {
                        this.$message.success("新增优惠券成功！");
                        console.log("新增优惠券成功，优惠券ID：" + response.data.data);
                    })
                    .catch(error => {
                        this.$message.error("新增优惠券失败：" + error);
                    });
            },
            // 新增秒杀券
            addSeckillVoucher() {
                axios.post("/voucher/seckill", this.voucher)
                    .then(response => {
                        this.$message.success("新增秒杀券成功！");
                        console.log("新增秒杀券成功，秒杀券ID：" + response.data.data);
                    })
                    .catch(error => {
                        this.$message.error("新增秒杀券失败：" + error);
                    });
            },
            // 返回上一页
            goBack() {
                history.back();
            }
        }
    });
</script>
</body>
</html>
